﻿<<template>
    <div style="height:100%;">
        <div class="divSearch" style="padding: 6px;">
            <Row>
                <Col span="24" class="col-margin">
                <!--根据需求删除不不要查询条件-->
                填报年度：
                <Select v-model="searchModel.FillInYear" placeholder="全部" style="width: 100px" @on-change="getPageData()">
                    <Option value="">全部</Option>
                    <Option :value="item.DictValue" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
                </Select>
                时间周期：
                <Select v-model="searchModel.TimesType" placeholder="全部" style="width: 100px" @on-change="getPageData()">
                    <Option value="">全部</Option>
                    <Option :value="item.DictValue" v-for="item in CycleList" :key="item.DictValue">{{item.DictText}}</Option>
                </Select>
                <Button icon="ios-search" type="ghost" @click="getPageData()" style="margin-left: 5px;background: linear-gradient(to bottom, #64c8ef 0%,#00a2e2 100%);color: #fff;border-radius: 3px;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);">
                    查询
                </Button>
                </Col>
            </Row>
        </div>
        <Row style="padding:10px;">
            <Col span="24" class="col-margin">
            <Table size="small" :height="clientHeight" border :context="ctx" :columns="columnsList" :data="datas.rows" no-data-text='暂无数据...'></Table>
            </Col>
        </Row>
        <Row>
            <Col span="24" class="dataTable">
            <Page style="float:right;margin: 5px 20px 5px 0;" class="page-style" :total="datas.total" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer @on-page-size-change="getPageSize" show-total show-elevator></Page>
            </Col>
        </Row>
        <Modal v-model="showType" :mask-closable="false">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">全年蚕桑生产情况填报</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
            <Form ref="dataModel" :model="dataModel" :rules="ruleValidate" :label-width="100">
                <Form-item style="display:none;" prop="Id">
                    <Input v-model="dataModel.Id"></Input>
                </Form-item>
                <Form-item label="生丝产量" prop="RawSilkYield">
                    <Input v-model="dataModel.RawSilkYield" placeholder="请输入生丝产量"></Input>
                </Form-item>
                <Form-item label="生丝产值" prop="RawSilkValue">
                    <Input v-model="dataModel.RawSilkValue" placeholder="请输入生丝产值"></Input>
                </Form-item>
                <Form-item label="丝绸产量" prop="SilkYield">
                    <Input v-model="dataModel.SilkYield" placeholder="请输入丝绸产量"></Input>
                </Form-item>
                <Form-item label="丝绸产值" prop="SilkValue">
                    <Input v-model="dataModel.SilkValue" placeholder="请输入丝绸产值"></Input>
                </Form-item>
                <Form-item label="蚕丝被产量" prop="SilkQuiltYield">
                    <Input v-model="dataModel.SilkQuiltYield" placeholder="请输入蚕丝被产量"></Input>
                </Form-item>
                <Form-item label="蚕丝被产值" prop="SilkQuiltValue">
                    <Input v-model="dataModel.SilkQuiltValue" placeholder="请输入蚕丝被产值"></Input>
                </Form-item>
            </Form>
            <div style="text-align:right;padding-top:10px">
                <Button type="primary" @click="save('dataModel')">保存</Button>
                <Button type="ghost" @click="cancel('dataModel')" style="margin-left: 8px">取消</Button>
            </div>
            <div slot="footer">
                <Alert style="margin-top:5px;text-align:left;font-size: 14px;" banner type="error">
                    备注：1.发种量合计=春+夏+秋季发种量；
                    <br/><br/>2.鲜茧总产量合计=春+夏+秋季鲜茧总产量；
                    <br/><br/> 3.鲜茧均价=（春季鲜茧总产量*春季鲜茧价格+夏季鲜茧总产量*夏季鲜茧价格+秋季鲜茧总产量*秋季鲜茧价格）/全年鲜茧总产量；
                    <br/><br/> 4.小蚕共育合计=春+夏+秋小蚕共育张数。
                </Alert>
            </div>
        </Modal>
        <Modal v-model="ViewShow" :mask-closable="false" width="1200">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">全年蚕桑生产情况填报</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
            <table class="reptable" style="width:100%">
                <tr>
                    <th rowspan="2">投产桑园面积（亩）</th>
                    <th colspan="4">发种量（张）</th>
                    <th colspan="4">鲜茧总产量（吨）</th>
                    <th colspan="4">鲜茧均价（元/公斤）</th>
                    <th colspan="4">小蚕共育（张）</th>
                    <th colspan="2">生丝</th>
                    <th colspan="2">丝绸</th>
                    <th colspan="2">蚕丝被</th>
                </tr>
                <tr>
                    <th>合计</th>
                    <th>春</th>
                    <th>夏</th>
                    <th>秋</th>
                    <th>合计</th>
                    <th>春</th>
                    <th>夏</th>
                    <th>秋</th>
                    <th>合计</th>
                    <th>春</th>
                    <th>夏</th>
                    <th>秋</th>
                    <th>合计</th>
                    <th>春</th>
                    <th>夏</th>
                    <th>秋</th>
                    <th>产量（吨）</th>
                    <th>产值（万元）</th>
                    <th>产量（万米）</th>
                    <th>产值（万元）</th>
                    <th>产量（吨）</th>
                    <th>产值（万元）</th>
                </tr>
                <tr style="height:40px;">
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.IntoMulArea}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.SeedSizeTotal}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.SeedSizeSpring}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.SeedSizeSummer}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.SeedSizeAutumn}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.FCYTotal}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.FCYSpring}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.FCYSummer}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.FCYAutumn}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.AFCTotal}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.AFCSpring}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.AFCSummer}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.AFCAutumn}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.SRSTotal}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.SRSSpring}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.SRSSummer}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.SRSAutumn}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.RawSilkYield}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.RawSilkValue}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.SilkYield}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.SilkValue}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.SilkQuiltYield}}</td>
                    <td style="text-align:right;padding: 4px 7px;">{{dataModel.SilkQuiltValue}}</td>
                </tr>
            </table>
            <div slot="footer">
                <Alert style="margin-top:5px;text-align:left;font-size: 14px;" banner type="error">
                    备注：1.发种量合计=春+夏+秋季发种量；
                    <br/><br/> 2.鲜茧总产量合计=春+夏+秋季鲜茧总产量；
                    <br/><br/> 3.鲜茧均价=（春季鲜茧总产量*春季鲜茧价格+夏季鲜茧总产量*夏季鲜茧价格+秋季鲜茧总产量*秋季鲜茧价格）/全年鲜茧总产量；
                    <br/><br/> 4.小蚕共育合计=春+夏+秋小蚕共育张数。
                </Alert>
            </div>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            showType: false,//编辑框弹出状态
            ViewShow: false,
            CreateYearList: this.GetGroupDict("ReportYear"),//上报年份
            CycleList: this.GetGroupDict("ReportCycle"),//周期
            ruleValidate: {//验证模型
                ReportId: [{ required: true, message: '报表编号不能为空', trigger: 'blur' }],
                RawSilkYield: [{ required: true, message: '生丝产量不能为空', trigger: 'blur' }],
                RawSilkValue: [{ required: true, message: '生丝产值不能为空', trigger: 'blur' }],
                SilkYield: [{ required: true, message: '丝绸产量不能为空', trigger: 'blur' }],
                SilkValue: [{ required: true, message: '丝绸产值不能为空', trigger: 'blur' }],
                SilkQuiltYield: [{ required: true, message: '蚕丝被产量不能为空', trigger: 'blur' }],
                SilkQuiltValue: [{ required: true, message: '蚕丝被产值不能为空', trigger: 'blur' }],
            },
            dataModel: {//编辑模型
                Id: 0,
                ReportId: '',
                RawSilkYield: '',
                RawSilkValue: '',
                SilkYield: '',
                SilkValue: '',
                SilkQuiltYield: '',
                SilkQuiltValue: '',
            },
            clientHeight: window.innerHeight - 260,//表格默认高度
            //查询模型：根据需求删除不不要查询条件
            searchModel: {
                ReportCode: 'MulAnnualProducStatist',
                FillInYear: '',
                TimesType: '',
                AreaCode: '',
                PageNumber: 1, PageSize: 20
            },
            pageSizeOpts: [20, 40, 50],//默认分页最大设置
            datas: {},//table数据对象
            dataIds: [],
            ctx: this,//table数据上下文
            columnsList: [//表头对象
                // { type: 'selection', width: 60, align: 'center' },//多选设置
                { title: "报表名称", key: "ReportName",  },
                { title: "填报年度", key: "FillInYearName",  },
                { title: "属行政区划", key: "AreaCodeName",  },
                { title: "填报周期", key: "TimesTypeName", },
                {
                    title: "报表状态", key: "StatusName", 
                    render: (h, params) => {
                        switch (params.row.Status * 1) {
                            case 0: //审核未通过
                                return h('span', { class: { Error: true } }, params.row.StatusName);
                            case 1: //未填写
                                return h('span', { class: { NoReport: true } }, params.row.StatusName);
                            case 2: //已填写
                                return h('span', { class: { AlreadyReport: true } }, params.row.StatusName);
                            case 3: //已上报
                                return h('span', { class: { UpReport: true } }, params.row.StatusName);
                            case 4: //审核通过
                                return h('span', { class: { Success: true } }, params.row.StatusName);
                            case 5: //锁定
                                return h('span', { class: { error: true } }, params.row.StatusName);
                            default:
                                return h('span', { class: { Default: true } }, params.row.StatusName);
                        }
                    }
                },
                { title: "新增时间", key: "StrAddTime", },
                { title: "填报时间", key: "StrUpdateTime",},
                {
                    title: "操作", key: "Id", width: 250, align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                class: { ieditColor: true },
                                props: {
                                    type: 'ghost', size: 'small', icon: 'ios-paper-outline'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.showInfo(params.row.Id, params.row.ReportCode)
                                    }
                                }
                            }, '查看'),
                            h('Button', {
                                class: { irefreshColor: true },
                                props: {
                                    type: 'ghost', size: 'small', icon: 'ios-compose', disabled: params.row.Status > 2
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.editInfo(params.row.Id, params.row.ReportCode)
                                    }
                                }
                            }, '填报'),
                            h('Button', {
                                class: { ieditColor: true },
                                props: {
                                    type: 'ghost', size: 'small', icon: 'upload', disabled: params.row.Status != 2
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.upReport(params.row.Id)
                                    }
                                }
                            }, '上报'),
                        ])
                    }
                }]
        }
    },
    mounted() {
        //table高度计算方法
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight - 260;
            })()
        };
    },
    methods: {
        upReport(id) {
            var self = this;
            self.$Modal.confirm({
                title: '提示信息',
                content: '<p>是否确认上报？</p>',
                onOk: () => {
                    var model = new Object();
                    model.Id = id;
                    model.reportType = '3';
                    model.strMsg = '';
                    this.$http.post("Report/PostUpStatus", model).then(
                        function (res) {
                            if (res.data.status == 1) {
                                self.$Notice.success({ title: '已上报！', desc: false });
                                self.getPageData();
                            }
                            else {
                                self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
                            }
                        }
                    );
                }
            });
        },
        //查看报表
        showInfo(id, reportCode) {
            var self = this;
            var user = this.GetlocaStorage("CSuserinfo");
            var AreaCode = user.AreaCode;
            this.$http.get("Report", { params: { id: id, reportCode: reportCode, AreaCode: AreaCode } }).then(//获取数据编辑项的值
                function (res) {
                    switch (res.data.list.status) {
                        case 1:
                            self.dataModel = res.data.list.model;
                            self.ViewShow = true;
                            break;
                        case 0:
                            self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
                            break;
                        case -1:
                            self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
                            break;
                    }
                }
            );
        },
        //保存方法
        save() {
            var self = this;
            this.$http.put('MulAnnualProducStatist', self.dataModel).then(
                function (res) {
                    if (res.data.status == 1) {
                        self.getPageData();//读取分页数据
                        self.modalHide();//关闭modal
                        self.$Notice.success({ title: '保存成功！', desc: false });
                    }
                    else {
                        self.$Modal.warning({ title: "提示信息", content: "更新失败,请与管理员联系!" });
                    }
                });
        },
        //获取当前页码
        getPageNumber(pageIndex) {
            this.searchModel.PageNumber = pageIndex;
            this.getPageData();
        },
        //获取当前分页大小
        getPageSize(pageSize) {
            this.searchModel.PageSize = pageSize;
            this.getPageData();
        },
        //获取this.datas: {},//table数据对象
        getPageData() {
            var self = this;
            var user = this.GetlocaStorage("CSuserinfo");
            this.searchModel.AreaCode = user.AreaCode;
            self.$http.post('Report/PostPageList', this.searchModel).then(function (res) {
                if (res.data.status === 1) {
                    self.datas = res.data;
                }
                else {
                    self.$Modal.error({ title: '提示信息', content: res.data.message });
                }
            });
        },
        //编辑获取对象传入id
        editInfo(id) {//编辑
            var self = this;
            this.$http.get("MulAnnualProducStatist", { params: { id: id } }).then(//获取数据编辑项的值
                function (res) {
                    if (res.data.status == 1) {
                        self.dataModel = res.data.model;
                        self.modalShow();//打开modal
                    }
                    else {
                        self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
                    }
                }
            );
        },
        //删除对象
        delInfo(id) {
            var self = this;
            self.$Modal.confirm({
                title: '提示信息',
                content: '<p>数据删除后不可恢复，确定要删除？</p>',
                onOk: () => {
                    this.$http.delete("MulAnnualProducStatist", { params: { id: id } }).then(
                        function (res) {
                            if (res.data.status == 1) {
                                self.$Notice.success({ title: '删除成功！', desc: false });
                                self.getPageData();
                            }
                            else {
                                self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
                            }
                        }
                    );
                }
            });
        },
        //编辑框打开
        modalShow() {
            this.showType = true;
        },
        //编辑框关闭
        modalHide() {
            this.showType = false;
        },
        //取消方法
        cancel(modelname) {
            this.$refs[modelname].resetFields();//重置model
            this.showType = false;//关闭modal
        },
        //重置model
        restModel(modelname) {
            this.$refs[modelname].resetFields();//重置model
        },
        //全选方法
        selectAll(selection) {
            this.dataIds = selection;
        },
        //checkbox选中方法
        selectSingel(selection, row) {
            this.dataIds = selection;
        },
        //checkbox取消选中方法
        selecChange(selection) {
            this.dataIds = selection;
        },
        //批量删除
        multiSelect() {
            var self = this;
            if (this.dataIds.length !== 0) {
                self.$Modal.confirm({
                    title: '提示信息',
                    content: '<p>数据删除后不可恢复，确定要删除？</p>',
                    onOk: () => {
                        var ids = this.getDataIds(this.dataIds);
                        this.$http.post("MulAnnualProducStatist/PostBatchDelete", ids).then(
                            function (res) {
                                if (res.data.status == 1) {
                                    self.dataIds = [];
                                    self.$Notice.success({ title: '删除成功！', desc: false });
                                    self.getPageData();
                                }
                                else {
                                    self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
                                }
                            }
                        );
                    }
                });
            } else {
                self.$Modal.warning({ title: "提示信息", content: "请选择需要删除的数据!" });
            }

        },
        getDataIds(idList) {
            var ids = [];
            if (idList.length !== 0) {
                for (var i = 0; i < idList.length; i++) {
                    ids.push(idList[i].Id);
                }
            }
            return ids;
        }
    },
    //创建Vue页面方法
    created: function () {
        //创业Vue前调用获取this.datas: {},//table数据对象
        this.getPageData();
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>
